<template>
  <div>
    <el-form :model="detail" ref="ruleForm3" :rules="rules" label-width="180px" class="demo-ruleForm" :inline="true">
      <h3 class="dialog-plate-title">基本信息</h3>
        <el-form-item label="工序名称" prop="name">
          <el-select v-model="detail.name" placeholder="请选择" class="width220" @change="changeName" :disabled="editDisalbe">
            <el-option v-for="item in processPlanList" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="材质" prop="drawMaterial">
          <el-autocomplete class="width220" v-model="detail.draw.drawMaterialName" :fetch-suggestions="querySearchAsync" placeholder="请输入材质" @select="handleSelect" :disabled="editDisalbe"></el-autocomplete>
        </el-form-item>
        <el-form-item label="形状" prop="type"  >
          <el-select v-model="detail.draw.type" placeholder="请选择" :disabled="editDisalbe">
            <el-option  label="棱柱体" value="1"></el-option>
            <el-option  label="圆柱体" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="加工尺寸(长)" prop="drawLength" v-if="detail.draw.type==='1'">
          <el-input v-model="detail.draw.drawLength" class="width220" :disabled="editDisalbe">
             <template slot="append">mm</template>
          </el-input>
        </el-form-item>
        <el-form-item :label="detail.draw.type==='1'?'加工尺寸(宽)':'加工尺寸（直径）'" prop="drawWide">
          <el-input v-model="detail.draw.drawWide" class="width220" :disabled="editDisalbe">
             <template slot="append">mm</template>
          </el-input>
        </el-form-item>
        <el-form-item label="加工尺寸(高)" prop="drawHigh">
          <el-input v-model="detail.draw.drawHigh" class="width220" :disabled="editDisalbe">
             <template slot="append">mm</template>
          </el-input>
        </el-form-item>
        <el-form-item label="重量" prop="drawWeight">
          <el-input v-model="detail.draw.drawWeight" class="width220" disabled>
            <template slot="append">Kg</template>
          </el-input>
        </el-form-item>
        
        <el-form-item label="单价" prop="drawPrice">
          <el-input v-model="detail.draw.drawPrice" class="width220" :disabled="editDisalbe">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="总工时" prop="wbPrice1" v-if="type==='update'">
          <el-input v-model="detail.wbPrice1" class="width220" disabled>
             <template slot="append">小时</template>
          </el-input>
        </el-form-item>
         <el-form-item label="创建人" prop="creatorName" v-if="type==='update'">
          <el-input v-model="detail.creatorName" disabled class="width220"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime" v-if="type==='update'">
          <el-input v-model="detail.createTime" disabled class="width220"></el-input>
        </el-form-item>

        <h3 class="dialog-plate-title">工序</h3>
         <el-form-item label="工序内容" prop="content" class="form-item-block heightAuto">
          <quill-editor v-model="detail.content" :disabled="editDisalbe" :options="editorOption" class="width520"></quill-editor>
        </el-form-item>
        <el-form-item label="工序设备工装" prop="gz">
          <el-input v-model="detail.gz" class="width220" :disabled="editDisalbe"></el-input>
        </el-form-item>
        <el-form-item label="工序操作者" prop="person">
          <el-select v-model="detail.person" placeholder="请选择工序操作者" class="width220" :disabled="editDisalbe||(detail.name?false:true)">
            <el-option  label="请选择" :value="0"></el-option>
            <el-option v-for="item in processOperatorList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="工序工时估工" prop="predictWorkTime">
          <el-input v-model="detail.predictWorkTime" class="width220" :disabled="editDisalbe">
             <template slot="append">小时</template>
          </el-input>
        </el-form-item>
          <el-form-item label="工序工时固定" prop="confirmWorkTime">
          <el-input v-model="detail.confirmWorkTime" class="width220" :disabled="editDisalbe">
             <template slot="append">小时</template>
          </el-input>
        </el-form-item>

        <h3 class="dialog-plate-title">工装</h3>
        <el-button type="primary" icon="el-icon-circle-plus-outline"  @click="dialogShow('gz')">新增工装</el-button>
        <el-button type="primary" icon="el-icon-circle-plus-outline"  @click="addGz">添加</el-button>
          <el-table :data="gztableData"  style="width: 100%;margin:0 auto;">
            <el-table-column prop="wkgz" width="180">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.wkgz" filterable clearable placeholder="请选择" >
                    <el-option
                      v-for="item in wkgzList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select> 
                </template>
            </el-table-column>
           <el-table-column prop="wkgzCount" label="数量" width="180">
              <template slot-scope="scope">
                  <el-input-number v-model="scope.row.wkgzCount"></el-input-number>
              </template>
           </el-table-column>
           <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="gztableData.splice(scope.$index, 1)">删除</el-button>
              </template>
           </el-table-column>
          </el-table>

        <h3 class="dialog-plate-title">量具</h3>
         <!-- <el-form-item label="工序内容" prop="content" class="form-item-block heightAuto">
          <quill-editor v-model="detail.content" :disabled="editDisalbe" :options="editorOption" class="width520"></quill-editor>
        </el-form-item> -->
         <el-button type="primary" icon="el-icon-circle-plus-outline" @click="dialogShow('lj')">新增量具</el-button>
         <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addLj">添加</el-button>
          <el-table :data="ljtableData"  style="width: 100%; margin:0 auto;">
            <el-table-column prop="wklj" width="180">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.wklj" filterable clearable placeholder="请选择" >
                    <el-option
                      v-for="item in wkljList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select> 
                </template>
            </el-table-column>
           <el-table-column prop="wkljCount" label="数量" width="180">
              <template slot-scope="scope">
                  <el-input-number v-model="scope.row.wkljCount"></el-input-number>
              </template>
           </el-table-column>
           <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="ljtableData.splice(scope.$index, 1)">删除</el-button>
              </template>
           </el-table-column>
          </el-table>

        <h3 class="dialog-plate-title">首检</h3>
        <el-form-item label="检验工序内容" prop="checkContent" class="form-item-block heightAuto">
          <quill-editor v-model="detail.checkContent" :disabled="editDisalbe" :options="editorOption" class="width520"></quill-editor>
        </el-form-item>
        <el-form-item label="检验设备工装" prop="checkGz">
          <el-input v-model="detail.checkGz" class="width220" :disabled="editDisalbe"></el-input>
        </el-form-item>
        <el-form-item label="检验操作者" prop="checkPerson">
          <el-select v-model="detail.checkPerson" placeholder="请选择检验操作者" class="width220" :disabled="editDisalbe">
            <el-option  label="请选择" :value="0"></el-option>
            <el-option v-for="item in checkPersonList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检验工时估工" prop="checkPredictWorkTime">
          <el-input v-model="detail.checkPredictWorkTime" class="width220" :disabled="editDisalbe">
            <template slot="append">小时</template>
          </el-input>
        </el-form-item>
        <el-form-item label="检验工时固定" prop="checkConfirmWorkTime">
          <el-input v-model="detail.checkConfirmWorkTime" class="width220" :disabled="editDisalbe">
            <template slot="append">小时</template>
          </el-input>
        </el-form-item>

        <h3 class="dialog-plate-title">次检</h3>
        <el-form-item label="检验工序内容" prop="cjCheckContent" class="form-item-block heightAuto">
          <quill-editor v-model="detail.cjCheckContent" :disabled="editDisalbe" :options="editorOption" class="width520"></quill-editor>
        </el-form-item>
        <el-form-item label="检验设备工装" prop="cjCheckGz">
          <el-input v-model="detail.cjCheckGz" class="width220" :disabled="editDisalbe"></el-input>
        </el-form-item>
        <el-form-item label="检验操作者" prop="cjCheckPerson">
          <el-select v-model="detail.cjCheckPerson" placeholder="请选择检验操作者" class="width220" :disabled="editDisalbe">
            <el-option  label="请选择" :value="0"></el-option>
            <el-option v-for="item in checkPersonList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检验工时估工" prop="cjCheckPredictWorkTime">
          <el-input v-model="detail.cjCheckPredictWorkTime" class="width220" :disabled="editDisalbe">
            <template slot="append">小时</template>
          </el-input>
        </el-form-item>
        <el-form-item label="检验工时固定" prop="cjCheckConfirmWorkTime">
          <el-input v-model="detail.cjCheckConfirmWorkTime" class="width220" :disabled="editDisalbe">
            <template slot="append">小时</template>
          </el-input>
        </el-form-item>
        <el-form-item  class="form-item-block text-center" v-if="!editDisalbe">
          <el-button type="primary" @click="onSubmit()">确认</el-button>
        </el-form-item>
      </el-form>
    <el-dialog :title="dialog2.title" :visible.sync="dialog2.isShow" append-to-body :close-on-click-modal="false" width="700px">
      <el-form label-position="right" label-width="100px" :model="childrenData">
          <!-- <el-form-item label="单一资源ID">
              <el-input v-model="childrenData.groupId" disabled></el-input>
          </el-form-item> -->
          <el-form-item label="名称">
              <el-input v-model="childrenData.name"></el-input>
          </el-form-item>
          <el-form-item label="编号">
              <el-input v-model="childrenData.code"></el-input>
          </el-form-item>
          <span v-if="dialog2.type==1">
          <el-form-item label="直径">
              <el-input v-model="childrenData.diameter" ></el-input>
          </el-form-item>
          <el-form-item label="深度">
              <el-input v-model="childrenData.depth"></el-input>
          </el-form-item>
          <el-form-item label="刃长">
              <el-input v-model="childrenData.blade"></el-input>
          </el-form-item>
          <el-form-item label="磨">
              <el-input v-model="childrenData.mo"></el-input>
          </el-form-item>
          </span>
          <!-- <el-form-item label="数量">
              <el-input v-model="childrenData.count" ></el-input>
          </el-form-item> -->
          <el-form-item label="备注">
              <el-input v-model="childrenData.remark"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitDialog2">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import planApi from 'plugins/axios/planApi.js';
import materielApi from 'plugins/axios/materielApi.js';
import baseApi from 'plugins/axios/baseApi.js';
import { quillEditor } from 'vue-quill-editor' // 调用富文本编辑器
import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式  三种样式三选一引入即可
//import 'quill/dist/quill.core.css'
//import 'quill/dist/quill.bubble.css'
import * as Quill from 'quill'; // 富文本基于quill
export default {
  name: 'processPlanDetail',
  components:{
    quillEditor
  },
  props:{
    editDisalbe:{
      type:Boolean
    },
    type:{
      type:String,
    },
    drawCode:{
      type:String
    },
    detail:{
      type:Object
    },
    taskTotalId:{
      type:[Number,String]
    },
  },
  data (){
    return {
      editorOption:{/**富文本编辑器配置 */
        modules: {
          toolbar: [
           ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            // [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{'direction': 'rtl'}],                         // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            [{ font: [] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"] // 清除文本格式
          ],
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          }
        }
      },
      rules:{
        name:[{ required: true, message: '请选择工序名称', trigger: 'blur' }],
        content:[{ required: true, message: '请输入工序内容', trigger: 'blur' }],
        predictWorkTime:[{ required: true, message: '请输入工序工时估工', trigger: 'blur' }],
        confirmWorkTime:[{ required: true, message: '请输入工序工时固定', trigger: 'blur' }]
      },
      ljtableData:[
        {
          wklj:'',
          wkljCount:0
        }
      ],
      gztableData:[
        {
          wkgz:'',
          wkgzCount:0
        }
      ],
      childrenData:{
        name:'',
        code:'',
        diameter:'',
        depth:'',
        blade:'',
        mo:'',
        count:'',
        remark:'',
        groupId:0,
      },
      dialog2:{
        title:'',
        isShow:false,
        type:0,
      },
      wkgzList:[],
      wkljList:[],
      processPlanList:[],/***所有工序列表 */
      processOperatorList:[],/***工序操作者列表 */
      checkPersonList:[],/**检验操作者列表 */
      drawMaterialList:[],/**材质列表 */
      processProductionList:[],
    }
  },
  watch:{
    detail(newObject){
      this.queryTableData();
    },
  },
  mounted(){
    let self = this;
    /**获取检验操作者列表 */
    materielApi.processOperatorList({name:'检验'}).then(res=>{
      self.checkPersonList= res.content;
    })
    /***工序操作者列表 */
   if(self.type!=='insert'){
      materielApi.processOperatorList({name:self.detail.nameName}).then(res=>{
        self.processOperatorList= res.content;
      })
   }
  //  获取 材质 & 密度列表
   baseApi.getCodeList(10).then(res=>{
     res.content.forEach(item=>{
       item.value =item.name;
     })
     self.drawMaterialList = res.content;
   });
  //  this.$nextTick(()=>{
  //     this.queryWkgzList();
  //     this.queryWkljList();
  //  });
  
  },
  created(){
    this.getProcessPlanList();
    this.$nextTick(()=>{
      this.queryWkgzList();
      this.queryWkljList();
      this.queryTableData();
    });
  },
  methods:{
    queryTableData(){
      let self = this;
      materielApi.technologyInfo({processId:self.detail.id,drawNo:self.detail.drawNo}).then(res=>{
         self.processProductionList = res.content.processProductionList;
         self.groupTableData();
      });
    },
    groupTableData(){
      let self = this;
      if(self.processProductionList!=null && self.processProductionList != undefined && self.processProductionList.length>0){
        self.gztableData = [];
        self.ljtableData = [];
        self.processProductionList.forEach(element => {
          if(element.groupId==2){
             self.gztableData.push({wkgz:element.production.id,wkgzCount:element.count})
          }else if(element.groupId==3){
             self.ljtableData.push({wklj:element.production.id,wkljCount:element.count})
          }
        });
      }
    },
    dialogShow(type){
      let self = this;
      self.dialog2.isShow = true;
      if(type ==='gz'){//工装
      self.dialog2.type =2;
        self.childrenData.groupId = 2;
      }else if(type ==='lj'){//量具
        self.childrenData.groupId = 3;
        self.dialog2.type =3;
      }

    },
    addLj(){
      let self = this;
      self.ljtableData.push({wklj:'',wkljCount:0});
    },
    addGz(){
      let self = this;
      self.gztableData.push({wkgz:'',wkgzCount:0});
    },
    queryWkgzList(){
      let self = this;
      let param = {
        groupId:2,
        currentPage:1,
        pageSize:100,
      };
      planApi.queryByCondition(param).then(res=>{
        self.wkgzList = res.content.records;
        self.detail.wkgz =  self.wkgzList[0].id;
      });
    },
    queryWkljList(){
      self = this;
      let param = {
        groupId:3,
        currentPage:1,
        pageSize:100,
      };
      //3
      planApi.queryByCondition(param).then(res=>{
        self.wkljList =  res.content.records;
        self.detail.wklj = self.wkljList[0].id;
      });
    },
    getProcessPlanList(){
      let self = this;
      baseApi.getCodeList(1).then(res=>{
        self.processPlanList=res.content;
      })
    },
    submitDialog2(){
      let self = this;
      // let type =  self.dialog2.title.indexOf('新增')>-1?1:2;
      let type = 1;
      self.childrenData.state = 0; //资源状态   0：待采购，1：已采购
      if(type==1){
          planApi.insertProduction(self.childrenData).then(res=>{
            self.dialog2.isShow= false;
            if(self.dialog2.type==2){
              self.queryWkgzList();
            }else if(self.dialog2.type==3){
              self.queryWkljList();
            }
            self.resetSearchChildData();
            self.$message.success(res.desc)
          })
      }else{
          planApi.editProduction(self.childrenData).then(res=>{
            self.dialog2.isShow= false;
            self.resetSearchChildData();
            self.$message.success(res.desc)
          })
      }
    },
    resetSearchChildData(){
      this.childrenData = {
        name:'',
        code:'',
        diameter:'',
        depth:'',
        blade:'',
        mo:'',
        count:'',
        remark:'',
        groupId:0,
      };
    },
    onSubmit(){
      let self = this;
      let postData = JSON.parse(JSON.stringify(self.detail));
      debugger;
      postData.processProductionList= self.getProcessProductionList();
      if(self.type==='insert'){
        postData.drawNo = self.drawCode;
        postData.draw.drawNo=self.drawCode;
        let param = {
          itemType:7,
          startTime:new Date(),
          endTime:null,
          taskTotalId:self.taskTotalId,
        }
        self.insertDzjz(param);
      } 
      self.$refs.ruleForm3.validate((valid) => {
         if (valid) {
           if(postData.processProductionList){
                materielApi.insertUpdateProcessPlan(self.type,postData).then(res=>{
                  self.ljtableData = [{wklj:'',wkljCount:0}];
                  self.gztableData = [{wkgz:'',wkgzCount:0}];
                  self.$emit('editSuccess');
                })
           }
         }
      })    
    },
    getProcessProductionList(){
      let processProductionList = [];
      let self = this;
      if(self.ljtableData!=null && self.ljtableData!=undefined && self.ljtableData.length>0){
        self.ljtableData.forEach(element => {
          processProductionList.push({productionId:element.wklj,count:element.wkljCount});
        });
      } 
      if(self.gztableData!=null && self.gztableData!=undefined && self.gztableData.length>0){
        self.gztableData.forEach(element => {
          processProductionList.push({productionId:element.wkgz,count:element.wkgzCount});
        });
      }
      return processProductionList;
    },
    /**员工工时统筹 */
    insertDzjz(param){
      let self = this;
      // let param={
      //   itemType:self.workTime.itemType,
      //   startTime:self.workTime.startTime,
      //   endTime:self.workTime.endTime,
      //   taskTotalId:self.workTime.taskTotalId,
      // };
      planApi.insertDzjz(param).then(res=>{
        console.log(res.content);
      });
    },
    changeName(val){
      let self = this;
      self.processPlanList.forEach(item=>{
        if(item.code===val){
          materielApi.processOperatorList({name:item.name}).then(res=>{
            self.processOperatorList= res.content;
          })
        }
      })
    },
    querySearchAsync(queryString, cb){
      var restaurants = this.drawMaterialList;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      cb(results)
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      this.detail.draw.drawMaterial = item.code;
    }
  }
}
</script>
<style lang="stylus" scoped>

</style>